<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

defineOptions({ name: "WebxEchartBar" });
const barEchartRef = ref();

onMounted(() => {
  const instance = echarts.init(barEchartRef.value);
  instance.setOption({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      }
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: "rgba(255,255,255,1)",
          borderRadius: [10, 10, 0, 0]
        },
        barWidth: 20
      }
    ]
  });
});
</script>

<template>
  <div class="w-full h-full" ref="barEchartRef"></div>
</template>

<style scoped lang="less"></style>
